<!--放大镜效果-->
<!--需要jq.js支持-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>放大镜效果</title>
		<script src="jq/jquery.js"></script>
		<style>
			*{padding:0;margin:0;}
			img{
				border:1px solid #ccc;
			}
			#small{
				float:left;
				margin-right:15px;
				position:relative;
				margin-left:10px;
			}
			#small #small_area{
				width:100px;
				height:100px;
				background:yellow;
				position:absolute;
				left:100px;
				top:100px;
				opacity:0.5;
				filter:alpha(opacity=50);
			}
			#big{
				float:left;
				position:relative;
			}
			#big_area{
				width:200px;
				height:200px;
				position:absolute;
				left:0;
				top:0;
				border:1px solid #ccc;
				overflow:hidden;
			}
			.big_img{
				position:absolute;
				left:-100px;
				top:-100px;
				z-index:-1;
			}
		</style>
	</head>
	<body>
		<div id="small">
			<div id="small_area"></div>
			<img class="small_img" src="../public/imgs/1.jpg" width="300px" />
		</div>
		<div id="big">
			<div id="big_area">
				<img class="big_img" src="../public/imgs/1.jpg" width="600px" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			//1.对小图设置鼠标移动事件
			$("#small").mousemove(function(e){
				//对小盒子区域设置移动
				var sleft = e.clientX-$(".small_img").offset().left-$("#small_area").width()/2;
				var stop = e.clientY-$(".small_img").offset().top-$("#small_area").height()/2;
				//判断临界点：
				if(sleft<=0){
					sleft = 0;
					$("#big").show();
				}
				if(sleft>=$(".small_img").width()-$("#small_area").width()){
					sleft = $(".small_img").width()-$("#small_area").width();
					$("#big").hide();
				}else{
					$("#big").show();
				}
				if(stop<=0){
					stop = 0;
					$("#big").show();
				}
				if(stop>=$(".small_img").height()-$("#small_area").height()){
					stop = $(".small_img").height()-$("#small_area").height();
					$("#big").hide();
				}
				//设置位移
				$("#small_area").css({"left":sleft+"px","top":stop+"px"});
				//获取两个图的比例
				var bl = $(".big_img").width()/$(".small_img").width();
				//设置大图的移动
				$(".big_img").css({"left":-sleft*bl+"px","top":-stop*bl+"px"})
			});
		})
	</script>
</html>